<template>
  <div class='edit-div'>
    <div class="form">
      登录密码：Ad{r5@_d6dhnr
    </div>
    <iframe id="ssh-iframe"
        title="web based ssh"
        width="100%"
        height="100%"
        :src="vnc">
    </iframe>
    <div class="form">
      <div class="dialog-footer">
        <el-button type="primary" @click="onSubmit">保存</el-button>
<!--        <el-button type="warning" @click="onStore">暂存</el-button>-->
        <el-button type="error" @click="onRecorvery">回收</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {imageModel, insModel} from '@/api/models'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      activeTab: 'second',
      instance_id: 0,
      image_id: 0,
      vnc: '',
      image_name: '',
      loading: false
    }
  },
  mounted() {
    this.instance_id = this.$route.params.ins_id
    // this.instance_id = 'ins-2jb70y0z'
    this.image_id = this.$route.params.image_id
    // this.ssh_url = `https://iaas.cloud.tencent.com/webshell?regionId=16&instanceId=${this.instance_id}&username=ubuntu&port=22`;
    this.vnc = this.$route.query.vnc
    this.image_name = this.$route.query.name
    console.log(this.vnc)
  },
  methods: {
    handleClick(tab) {
      if(tab.name == 'first') {
        this.$router.replace('/image/import')
      }
    },
    onSubmit() {
      if (this.loading) return
      this.loading = true
      imageModel.create2({
        instance_id: this.instance_id,
      }, res => {
        console.log(res)
        this.$router.push('/my/images')
        this.loading = false
      }, err => {
        console.log(err)
        this.loading = false
      })
    },
    onRecorvery() {
      if (this.loading) return
      this.loading = true
      insModel.action({
        action: 'recovery',
        insId: this.instance_id
      }, res => {
        Message.success(res.message)
        this.$router.push('/my/images')
        this.loading = false
      }, err => {
        Message.error(err.message)
        this.loading = false
      })
    },
    onStore() {
      this.$router.push('/my/instances') 
    }
  }
}
</script>
<style lang="scss" scoped>
.form{
  text-align: left;
}
#image_source{
  height: 34px;
}
</style>